<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>查询用户</title>
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <meta name="format-detection" content="telephone=yes">
    <meta name="msapplication-tap-highlight" content="no">
      <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- Data Tables -->
    <link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx}/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
        <!-- 全局js -->
    <script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>

    <!-- Data Tables -->
    <script src="${ctx}/js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="${ctx}/js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="${ctx}/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx}/js/plugins/layer/laydate/laydate.js"></script>
    <!-- 自定义js -->
    <script src="${ctx}/js/content.js?v=1.0.0"></script>
    <script src="${ctx}/js/plugins/sweetalert/sweetalert.min.js"></script>
    <style>
    	#container1{
    		position:absolute;
    		width:500px;
    		border:1px solid red;
    		top:0px;
    		margin:0px 35%;
    	}
    	table{
    		text-align:center;
    	}
    </style>
</head>
<body>
 <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
             <div class="col-sm-3">
            	<input id="openid" style="width:100%;" placeholder="用户id"/>
            	 </div>
            	  <div class="col-sm-3">
           		水果:
           		<select id="gift">
         				<c:forEach items="${gifts }" var="record">
         					<option value="${record.id }">${record.name_ }</option>
         				</c:forEach>
           		</select>
           		</div>
           		  <div class="col-sm-3">
           		优惠金额<input type="number" id="num" placeholder="优惠金额"/>
           		 </div>
           		   <div class="col-sm-3">
           				<button onclick="add()">添加</button>
           		 </div>
            </div>
        </div>
        <h1>优惠列表</h1>
         <div class="row">
    <table class="table table-striped table-bordered table-hover dataTables-example text-center">
              <thead>
           		<tr>
           		<th style="text-align: center" width="30%">用户id</th>
           		<th style="text-align: center" width="20%">头像</th>
           		<th style="text-align: center" width="10%">昵称</th>
           		<th style="text-align: center" width="20%">商品名称</th>
           		<th style="text-align: center" width="10%">优惠金额</th>
           		<th style="text-align: center" width="10%">操作</th>
           		</tr>
           		  </thead>
<%--            		<c:forEach items="${list }" var="record"> --%>
<!--            			<tr>  -->
<%--            			<td align="center">${record.openid_ }</td> --%>
<%--            			<td align="center"><img width = "40px" src="${record.head_pic }"/></td> --%>
<%--            			<td align="center">${record.nick_name }</td> --%>
<%--            			<td align="center">${record.gift_name_ }</td> --%>
<%--            			<td align="center">${record.num_ }</td> --%>
<%--            			<td align="center"><a onclick="del('${record.id}')">删除</a></td> --%>
<!--            			</tr> -->
<%--            		</c:forEach> --%>
           	</table>
        </div>
    </div>
</body>
<script src="${ctx}/js/util.js"></script>
<script>
	var table = null;
	var list = ${list};
	window.onload = function(){
		table = $('.dataTables-example').DataTable({
			"bPaginate" : true,//翻页功能
			"bSort" : false,//排序功能
			"aoColumns" : [
											{
												"sClass" : "center",
												"mRender" : function(
														data, type,
														full) {
														return full.openid_;
												}
											},
											{
												"sClass" : "center name",
												"mRender" : function(
														data, type,
														full) {
													return "<img width = '45px' src='"+full.head_pic+"'/>";
												}
											},
											{
												"sClass" : "center value penma",
												"mRender" : function(
														data, type,
														full) {
													return full.nick_name;
												}
											},
											{
												"sClass" : "center value daima",
												"mRender" : function(
														data, type,
														full) {
													return full.gift_name_;
												}
											},{
												"sClass" : "center value daima",
												"mRender" : function(
														data, type,
														full) {
													return full.num_;
												}
											},
											{
												"sClass" : "center value state",
												"mRender" : function(
														data, type,
														full) {
													
													return "<a onclick=\"del('"+full.id+"')\">删除</a>";
												}
											}
											]
		});
		var data = list;
		for(var i =0,len=data.length;i<len;i++){
			table.row.add(data[i]);
		}
		table.draw();
	}
	
	function add(){
		var openid = $("#openid").val();
		var giftid = $("#gift").val();
		var num = $("#num").val();
		if(!openid || !giftid || !num){
			alert("有选项不能为空");
			return;
		}
		var obj = {};
		obj.openid = openid;
		obj.giftid = giftid;
		obj.num = num;
		sendReq("${ctx}/user/add",obj,function(data){
			if(data.status ){
				location.reload();
			}else{
				alert(data.msg);
			}
		});
	}
	
	function del(id){
		sendReq("${ctx}/user/del",{id:id},function(data){
				location.reload();
		});
	}
</script>
</html>
